import AddCinema from "./add.js";
import Seat from "./seat.js";

const $ = layui.$;
export default class Cinema{
    constructor(){
        this.render();
        this.handle();
    }
    render(){
        let template = `
            <h1>院线管理</h1>
            <button id="addBtn" type="button" class="layui-btn">
                <i class="layui-icon"></i>
            </button>
            <table id="cinemaTable" lay-filter="cinemaTable"></table>
            <script type="text/html" id="addCinemaTemplate"></script>
            <script type="text/html" id="updateCinemaTemplate"></script>
        `;
        $("#content").html(template);
    }
    handle(){
      new AddCinema();
        let table = layui.table;
        let form = layui.form;
        
        form.render();
        table.render({
          elem: "#cinemaTable",
          url: "/api/cinemas", //数据接口
          page: {
            //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档
            layout: ["limit", "count", "prev", "page", "next", "skip"], //自定义分页布局
            //,curr: 5 //设定初始在第 5 页
            groups: 5, //只显示 5 个连续页码
            first: "首页", //不显示首页
            last: "尾页", //不显示尾页
            limits: [1, 3, 5, 10, 15, 20],
            limit: 3,
          },
          cols: [
            [
              { field: "name", title: "姓名" },
              { field: "addr", title: "院线地址", sort: true },
              { field: "tel", title: "官方电话", sort: true },
              { field: "url", title: "官方网站", sort: true },
              { field: "screens", title: "放映厅",
                templet:(d) => {
                  let str = '';
                  for(let s of d.screens){
                    str += `<span class="seat" data-seat="${s.seat}" style="cursor:pointer">${s.name}</span>,`;
                  }
                  console.log(d);
                  return str;
                }
              },
              { fixed: "right", title: "操作", toolbar: "#cinemaBar" },
            ],
          ],
          parseData: function (res) {
            //res 即为原始返回的数据
            return {
              code: 0, //解析接口状态
              msg: "", //解析提示文本
              count: res.total, //解析数据长度
              data: res.rows, //解析数据列表
            };
          },
          request: {
            pageName: "current", //页码的参数名称，默认：page
            limitName: "size", //每页数据量的参数名，默认：limit
          },
          done(){
            $(".seat").click(function(){
              new Seat($(this).attr("data-seat"));
            })
          }
        });
    }
}